<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • Pager</title>
    <link rel="stylesheet" href="pager.css">
    <script src="../../dist/regular.js"></script>
    <script src="pager.js"></script>
  </head>
  <body>

    <div id="app"> </div>
    
    <script type='text/tpl' id='tpl'>
      <button de-click={total = total + 1}>total+1</button>
      <pager ref='pager' total={Math.floor(total/20)} current={current} title.cmpl='<div>{total}</div>' ></pager>
      <input ref='goto' type="number" value="{current}" max="{this.$refs.pager.data.total}" min=1 >
      <button de-click={current = +this.$refs.goto.value}>go</button>
    </script>

    <script>
      var app = new Regular({
        template: '#tpl',
        data: {total: 100, current:3},
        config: function(data){
          console.log(data)
        }
      });
      app.$inject("#app");
    </script>
  </body>
</html>